<template>
    <div class="header-top">
        <div class="header-section">
            <div class="left-section">
                <div class="language-selector">
                    <img src="@/assets/imgs/en.png" alt="English" />
                    <a href="/">English</a>
                </div>
                <div class="company-name">
                    <a href="/"><img src="@/assets/imgs/fs.png" alt="菲斯生物" />菲斯生物</a>
                </div>
            </div>

            <div class="right-section">
                <div class="contact-info">
                    <span class="phone"><i class="el-icon-phone"></i>400-0505-016</span>
                    <span class="email"
                        ><i class="el-icon-message"></i
                        ><a href="mailto:info@sincoparmachem.com">info@sincoparmachem.com</a></span
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
$primary-color: #000;
$text-color: #fff;
$hover-color: #00a7e1;
$breakpoint-mobile: 768px;

@mixin clearfix {
    &::after {
        content: '';
        display: table;
        clear: both;
    }
}

.header-top {
    background-color: $primary-color;
    padding: 10px 0;
    @include clearfix;

    .header-section {
        width: 1200px;
        margin: 0 auto;
        font-size: 16px;
        font-weight: bold;
    }

    .left-section {
        float: left;

        .language-selector {
            display: inline-block;
            margin-right: 15px;

            img {
                width: 27px;
                height: 18px;
                vertical-align: middle;
                margin-right: 5px;
            }

            a {
                color: $text-color;
                vertical-align: middle;
                &:hover {
                    color: $hover-color;
                }
            }
        }

        .company-name {
            display: inline-block;
            img {
                width: 36px;
                height: 20px;
                vertical-align: middle;
                margin-right: 5px;
            }

            a {
                color: $text-color;
                vertical-align: middle;
                &:hover {
                    color: $hover-color;
                }
            }
        }
    }

    .right-section {
        float: right;

        .contact-info {
            color: $text-color;

            .phone {
                margin-right: 15px;
            }

            i {
                padding-right: 5px;
            }

            a {
                color: $text-color;
                &:hover {
                    color: $hover-color;
                }
            }
        }
    }
}

@media screen and (max-width: $breakpoint-mobile) {
    .header-top {
        .left-section,
        .right-section {
            float: none;
            text-align: center;
            margin-bottom: 10px;
        }

        .right-section {
            .contact-info {
                .phone,
                .email {
                    display: block;
                    margin: 5px 0;
                }
            }
        }
    }
}
</style>
